.products {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: var(--space-xs);
}

.products__oil-range {
    justify-content: space-around;
}

.products__element {
    width: 175px;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.products__tile {
    position: relative;
    width: 155px;
    height: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #878787;
    box-shadow: 1px 3px 15px #a3a3a3;
    border-radius: 18px;
    transition:
        background-color 0.2s ease-in-out,
        transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
    overflow: hidden;
    gap: 12px;
}

.products__tile-ford-genuine,
.products__tile-oil-range,
.products__tile-consumables {
    background-color: #00263d;
}

.products__tile-image {
    object-fit: contain;
    object-position: center;
    transition: transform 0.5s ease;
}

.products__tile-oil-range .products__tile-image,
.products__tile-consumables .products__tile-image {
    object-position: center;
}

.products__element:is(:hover, :focus-within) {
    .products__tile-motorcraft,
    .products__tile-ford-motorcraft,
    .products__tile-motorcraft-plus {
        background-color: #dc1816;
    }

    .products__tile-ford-genuine,
    .products__tile-oil-range {
        background-color: #2096cd;
    }

    .products__tile-consumables {
        background-color: #ffde00;
    }
}

.products__tile--shine::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-110%);
}

.products__tile--shine:hover {
    transform: translateY(-6px);
    box-shadow: rgba(25, 33, 67, 0.35) 0 16px 30px -10px;

    .products__tile-image {
        transform: scale(1.08);
    }
}

.products__tile--shine:hover.products__tile--shine::after {
    transform: translateX(110%);
    transition: transform 0.7s ease;
}

.products__tile-label {
    word-break: break-word;
}

.products__tile-label--ford-genuine {
    color: #2096cd;
}

.products__tile-label--ford-motorcraft,
.products__tile-label--motorcraft {
    color: #dc1816;
}

@media only screen and (max-width: 992px) {
    .products__oil-range {
        justify-content: center;
    }
}

.products__supplier {
    column-gap: 0;
}

.products__supplier-header {
    padding: var(--space-s) 0;
}

.products__tile-supplier {
    width: 140px;
    height: 140px;
    padding: var(--space-xs);
    background-color: transparent;
    box-shadow:
        rgba(16, 24, 40, 0.05) 0px 1px 2px,
        rgba(16, 24, 40, 0.32) 0px 12px 28px -18px;
}

.products__element-supplier:is(:hover, :focus-within) {
    .products__tile-supplier {
        transform: translateY(-3px);
        box-shadow:
            0 2px 4px rgba(16, 24, 40, 0.04),
            0 22px 40px -20px rgba(16, 24, 40, 0.32);
    }

    .products__tile-image {
        transform: scale(1.04);
    }

    .products__tile-label {
        color: var(--motorcraft-red);
    }
}